<template>
  <div class="users" v-loading="loading">
    <user-header :userInfo="userInfo" @updateUserVita="updateUserVita" />
    <user-footer :userInfo="userInfo" @updateMyInfo="updateMyInfo" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getUserInfoById } from '@/service/user/user.ts'
import UserHeader from './c-cpns/user-header.vue'
import UserFooter from './c-cpns/user-footer.vue'
import { ElMessage } from 'element-plus'

const route = useRoute()
const loading = ref(true)
const userId = ref(route.params.no) // 初始化 userId
const userInfo = ref({
  userId: 0,
  userBust: '',
  userVita: '',
  nickname: '',
  age: 0,
  sex: '',
  userEmail: '',
  phoneNumber: '',
  skill: ''
})

watch(
  () => route.params.no,
  (newNo) => {
    userId.value = newNo
    updateUserInfo()
  }
)
const updateUserVita = (newUserVita: any) => {
  userInfo.value.userVita = newUserVita
}
const updateMyInfo = (
  newNickName: any,
  newAge: any,
  newSex: any,
  newUserEmail: any,
  newPhoneNumber: any,
  newSkill: any
) => {
  userInfo.value.nickname = newNickName
  userInfo.value.age = newAge
  userInfo.value.sex = newSex
  userInfo.value.userEmail = newUserEmail
  userInfo.value.phoneNumber = newPhoneNumber
  userInfo.value.skill = newSkill
}
function updateUserInfo() {
  loading.value = true
  if (userId.value) {
    getUserInfoById(userId.value).then((res: any) => {
      if (res.data) {
        userInfo.value = res.data
        document.title = '"' + userInfo.value.nickname + '"' + '的个人主页 - 实力接单'
        loading.value = false
      } else {
        ElMessage.error('网络异常，请刷新重试')
      }
    })
  }
}
updateUserInfo()
</script>

<style lang="less" scoped>
.users {
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
  background-color: #fff;
  margin: 20px auto;
  border-radius: 5px;
  padding: 20px;
}
@media screen and (min-width: 1920px) {
  .users {
    margin: 80px auto;
  }
}
.users > * {
  flex: 1;
  padding: 20px;
  margin: 10px;
  flex: 1 100%;
  border-radius: 5px;
  border: 1px solid #5e5e5e5c;
  box-shadow: 5px 5px 2px 1px rgba(0, 0, 0, 0.2);
}
.user-header {
  display: flex;
}
</style>
